<template>
    <!--      轮播图-->
    <div class="carousel-map" style="width: 100%; height:100%;">
        <el-carousel :interval="4000"  @change="changeImg" arrow="always"
                     height="43.5rem">
            <el-carousel-item v-for="(item,index)  in bannerList" :key="index">
                <div class="demo-image__preview">
                <el-image
                        :class="className"
                        style="width: 100%; height:100%;"
                        :src='item.value'
                        fit="cover">
                </el-image>
                </div>
            </el-carousel-item>
        </el-carousel>
    </div>
</template>

<script>

export default {
    name: "home",
    data() {
        return {
            bannerList: [
                {
                    "name": 1,
                    "value": "/static/pic1.jpg",
                    "url": "https://shop.hainanfp.com/index"
                }, {
                    "name": 2,
                    "value": "/static/pic2.jpg",
                    "url": "https://shop.hainanfp.com/index"
                }, {
                    "name": 3,
                    "value": "/static/pic3.jpg",
                    "url": "https://shop.hainanfp.com/index"
                }
                         ],//轮播图地址 这块写你们的轮播图数组即可
            className: ""//轮播图名字
        };
    },
    mounted() {
        this.className = "lun-img";
        setTimeout(() => {
            this.className = "lun-img-two";
        }, 300);
    },
    methods:{
        //轮播图切换
        changeImg(e) {
            // console.log(e, "当前下标");
            this.className = "lun-img";
            setTimeout(() => {
                this.className = "lun-img-two";
            }, 300);
        },
        openWeb(e){
            console.log("网址",e)
            window.location.href = e;
        }
    }
}
</script>

<style scoped>

    .carousel-map {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    .lun-img {
        transform: scale(1.5);
    }
    .lun-img-two {
        transition: all 3s;
        transform: scale(1);
    }
    .el-carousel__item.is-animating {
        transition: all 0.6s;
    }


</style>
